import { UseCRUDContext } from '@/context/CRUDContext';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Form, Input, InputNumber, Modal, Select, Space, Table } from 'antd';

const CRUDManagement = ({ children }: any) => {
  return <div>{children}</div>;
};

CRUDManagement.Table = () => {
  const { data, deleteItem } = UseCRUDContext();
  const { confirm } = Modal;
  const handleDelete = (num: any) => {
    try {
      confirm({
        title: '提示',
        icon: <ExclamationCircleFilled />,
        content: '此操作将永久删除该条信息?',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        async onOk() {
          await deleteItem(num);
        },
      });
    } catch (error) {
      console.log(error);
    }
  };
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_: any, record: any) => {
        return (
          <>
            <Button type="primary">编辑</Button>
            <Button
              type="primary"
              danger
              onClick={() => {
                handleDelete(record.id);
              }}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  return <Table dataSource={data} columns={columns}></Table>;
};

CRUDManagement.Search = () => {
  const { Option } = Select;
  const { filters, resetForm } = UseCRUDContext();

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };

  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    // console.log(values);
    filters(values);
  };

  const onReset = () => {
    form.resetFields();
    resetForm();
  };
  return (
    <div>
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        style={{ maxWidth: '100%', display: 'flex', alignItems: 'center' }}
      >
        <Form.Item name="name" label="姓名" style={{ width: '250px' }}>
          <Input style={{ width: '150px' }} />
        </Form.Item>
        <Form.Item name="age" label="年龄" style={{ width: '250px' }}>
          <InputNumber min={1} max={100} style={{ width: '150px' }} />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Select placeholder="请选择" allowClear style={{ width: '150px' }}>
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Space>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default CRUDManagement;
